<template>
  <view class="index-heder">
    <fui-search-bar @search="search"></fui-search-bar>
    <view>
        <fui-swiper-dot :items="items" :current="current">
            <swiper class="fui-banner__wrap" @change="change" circular :indicator-dots="false" autoplay
                :interval="4000" :duration="150">
                <swiper-item v-for="(item) in items" :key="item">
                    <image style="width: 100%;"   mode="widthFix" :src="item"></image>
                </swiper-item>
            </swiper>
        </fui-swiper-dot>
    </view>

    <view class="types">
        <view @click="item.fun" class="type" v-for="item in types" :key="item.name">
            <image   mode="widthFix" :src="item.icon" />
            <view>{{item.name}}</view>
        </view>
    </view>

  </view>

  
  <fui-landscape :show="show" maskClosable @close="show=false">
        <view  class="customer-landscape">
            <view class="join">加入群聊</view>
            <img src="https://dmn000001-1301065476.cos.ap-guangzhou.myqcloud.com/opt/test/upFiles/QR/1711503841146_1711503841163.png">
        </view>
    </fui-landscape>

</template>

<script setup lang="ts">
const show =ref(false)
const current = ref(0)
const items = ref([
    "/static/h5/index/index1.png",
    "/static/h5/index/index2.png",
    "/static/h5/index/index3.png",
])

const playingInfo = ()=>{
    uni.navigateTo({
        url:"/subPackages_user/college/college"
    })
}

const playingRanking = ()=>{
    uni.navigateTo({
        url:"/subPackages_play/popular/popular"
    })
}
const join = ()=>{
    show.value = true
}
const getNew = ()=>{
    uni.navigateTo({
        url:"/subPackages_play/newOnlin/newOnlin"
    })
}
const notice= ()=>{
    uni.navigateTo({
        url:'/subPackages_play/notice/notice'
    })
}

const types = ref([
    {
        name:"玩法介绍",
        icon:'/static/h5/index/play.png',
        fun:playingInfo
    },
    {
        name:"玩法排行",
        icon:'/static/h5/index/ph.png',
        fun:playingRanking
    },
    {
        name:"加入群聊",
        icon:'/static/h5/index/join.png',
        fun:join
    },
    {
        name:"最新上线",
        icon:'/static/h5/index/new.png',
        fun:getNew
    },
    {
        name:"平台公告",
        icon:'/static/h5/index/gg.png',
        fun:notice
    },
])

const search = (e:any)=>{
    uni.navigateTo({
        url:`/pages/search/search?data=${e.detail.value}`
    })
}
const change = ()=>{

}
</script>

<style lang="scss" scoped>
.index-heder{
    .fui-banner__item {
        width: 100%;
        height: 300rpx;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34rpx;
        font-weight: 600;
        border-radius: 40rpx;
    }

    .fui-banner__wrap {
        height: 300rpx;
        border-radius: 40rpx;
    }
    .types{

        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30rpx;
        justify-content: space-between;
        .type{
            text-align: center;
            font-size: 24rpx;
            image{
                width: 100rpx;
                border-radius: 20rpx;
            }
        }
    }
}
.customer-landscape{
    width: 550rpx;
    height: 570rpx;
    border-radius: 20rpx;
    background: white;
    background-size: 100% 100%;
    .join{
        font-size: 40rpx;
        text-align: center;
        position: relative;
        margin-top: 20rpx;
    }
        img{
            width: 400rpx;
            height: 400rpx;
            position: relative;
            top: 40rpx;
            left: 75rpx;
            border: 1rpx solid rgb(199, 150, 255);
            border-radius: 20rpx;
        }

}
</style>
